Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bundle buddy reporter #4648

Merged
merged 6 commits into from
Jun 3, 2020
Merged

Bundle buddy reporter #4648

merged 6 commits into from
Jun 3, 2020

Conversation

devongovett
Copy link
Member

cc. @samccone

TODO: determine a CLI flag to run this with. right now you run enable it with BUNDLE_BUDDY=true as an environment variable.

@height
Copy link

height bot commented May 23, 2020

Link Height tasks by mentioning a task ID in the pull request title or description, commit messages, or comments.

You can also use "Close T-X" to automatically close a task when the pull request is merged.

@samccone
Copy link

Looks like it works :)
image

I found a few interesting deltas between the generated sourcemaps and the graph files
image

But it does seem to just work.

@parcel-benchmark
Copy link

parcel-benchmark commented May 23, 2020

Benchmark Results

Kitchen Sink ✅

Timings

Description Time Difference
Cold 6.59s +52.00ms
Cached 2.41s +25.00ms

Cold Bundles

Bundle Size Difference Time Difference
dist/legacy/parcel.d5807e82.webp 102.94kb +0.00b 250.00ms +103.00ms ⚠️
dist/modern/parcel.d5807e82.webp 102.94kb +0.00b 250.00ms +103.00ms ⚠️
dist/legacy/kitchen-sink.679578a5.js 1.16kb +0.00b 1.74s +184.00ms ⚠️
dist/modern/kitchen-sink.90de237b.js 1.16kb +0.00b 1.74s +1.15s ⚠️
dist/modern/index.html 709.00b +0.00b 720.00ms +36.00ms

Cached Bundles

Bundle Size Difference Time Difference
dist/legacy/parcel.d5807e82.webp 102.94kb +0.00b 227.00ms -30.00ms 🚀
dist/modern/parcel.d5807e82.webp 102.94kb +0.00b 228.00ms -29.00ms 🚀
dist/legacy/kitchen-sink.679578a5.js 1.16kb +0.00b 419.00ms -56.00ms 🚀
dist/modern/kitchen-sink.90de237b.js 1.16kb +0.00b 418.00ms -56.00ms 🚀
dist/legacy/index.html 709.00b +0.00b 420.00ms -57.00ms 🚀
dist/modern/index.html 709.00b +0.00b 418.00ms -56.00ms 🚀
dist/legacy/styles.afb8e31a.css 78.00b +0.00b 419.00ms -56.00ms 🚀
dist/modern/styles.cda8c91b.css 78.00b +0.00b 418.00ms -56.00ms 🚀

React HackerNews ✅

Timings

Description Time Difference
Cold 29.33s +266.00ms
Cached 2.44s -21.00ms

Cold Bundles

No bundle changes detected.

Cached Bundles

Bundle Size Difference Time Difference
dist/index.js 478.44kb +0.00b 311.00ms -117.00ms 🚀
dist/PermalinkedComment.89fe2d7f.js 4.61kb +0.00b 309.00ms -117.00ms 🚀
dist/UserProfile.8cce6c4b.js 1.83kb +0.00b 309.00ms -118.00ms 🚀
dist/NotFound.98e75551.js 468.00b +0.00b 309.00ms -118.00ms 🚀

AtlasKit Editor ✅

Timings

Description Time Difference
Cold 2.91m -12.41s 🚀
Cached 5.40s +75.00ms

Cold Bundles

Bundle Size Difference Time Difference
dist/ak-editor.061e9ea4.js 2.56mb +0.00b 1.60m -8.35s 🚀
dist/pdfRenderer.74642224.js 1.11mb +0.00b 1.02m +3.38s ⚠️
dist/popup.808cb784.js 219.91kb +0.00b 1.10m +5.51s ⚠️
dist/media-viewer.a42ca57a.js 71.07kb +0.00b 22.35s +2.39s ⚠️
dist/card.e4d8099d.js 61.60kb +0.00b 21.48s -45.28s 🚀
dist/component.b9da2aab.js 56.07kb +0.00b 7.45s +1.91s ⚠️
dist/Modal.ec08b5a6.js 41.59kb +0.00b 3.30s -5.71s 🚀
dist/component.a8512b92.js 28.98kb +0.00b 7.87s -1.14s 🚀
dist/DatePicker.d24458b4.js 21.54kb +0.00b 9.88s +1.75s ⚠️
dist/EmojiPickerComponent.38775e63.js 18.33kb +0.00b 54.07s +36.15s ⚠️
dist/clipboard.9f0c9743.js 17.18kb +0.00b 1.61m +34.68s ⚠️
dist/js.baeda348.js 16.46kb +0.00b 6.85s +1.39s ⚠️
dist/dropzone.ddbef039.js 14.69kb +0.00b 1.61m +34.51s ⚠️
dist/ui.9e4d74b0.js 14.45kb +0.00b 18.80s -47.96s 🚀
dist/EmojiTypeAheadComponent.899f7d25.js 9.20kb +0.00b 1.60m +1.40m ⚠️
dist/card.40596af5.js 6.29kb +0.00b 21.48s +1.52s ⚠️
dist/media-viewer.2db4dc6f.js 4.18kb +0.00b 35.35s +15.29s ⚠️
dist/EmojiPickerComponent.bd593806.js 3.92kb +0.00b 17.83s +6.19s ⚠️
dist/16.cb2f1a3a.js 3.72kb +0.00b 3.30s +1.41s ⚠️
dist/Modal.1111ef83.js 3.50kb +0.00b 7.76s +5.87s ⚠️
dist/png-chunks-extract.c0f57e67.js 3.49kb +0.00b 6.85s +1.39s ⚠️
dist/ak-editor.e6be06da.css 3.46kb +0.00b 1.35m -10.25s 🚀
dist/dropzone.79e05ece.js 3.44kb +0.00b 1.04m +4.53s ⚠️
dist/16.c7be7376.js 2.54kb +0.00b 6.85s +1.39s ⚠️
dist/EmojiUploadComponent.4946a1c6.js 2.50kb +0.00b 54.45s +42.54s ⚠️
dist/ResourcedEmojiComponent.0979b683.js 2.24kb +0.00b 7.77s -1.22s 🚀
dist/16.bb063a1f.js 1.83kb +0.00b 7.87s +1.89s ⚠️
dist/date.56d1aa9e.js 1.81kb +0.00b 8.12s +1.90s ⚠️
dist/media-card-analytics-error-boundary.2a1f7d61.js 1.81kb +0.00b 21.48s -45.28s 🚀
dist/browser.90c1ebeb.js 1.79kb +0.00b 1.61m +34.38s ⚠️
dist/16.b1b0372d.js 1.77kb +0.00b 7.60s +1.93s ⚠️
dist/images.16b3af40.js 1.75kb +0.00b 8.20s +1.88s ⚠️
dist/feedback.b59078b6.js 1.72kb +0.00b 8.99s +1.49s ⚠️
dist/workerHasher.9975765a.js 1.65kb +0.00b 16.32s +5.35s ⚠️
dist/list-number.d2097959.js 1.54kb +0.00b 8.32s +1.87s ⚠️
dist/status.f61d9ac5.js 1.54kb +0.00b 8.49s +1.88s ⚠️
dist/16.450f3a0d.js 1.49kb +0.00b 7.86s +1.99s ⚠️
dist/code.4289d7dd.js 1.46kb +0.00b 8.04s +1.82s ⚠️
dist/16.2b801dd1.js 1.44kb +0.00b 7.60s +1.93s ⚠️
dist/16.fe51c023.js 1.44kb +0.00b 7.60s +1.81s ⚠️
dist/16.7d4b2402.js 1.42kb +0.00b 10.06s +3.93s ⚠️
dist/link.36b44af7.js 1.38kb +0.00b 8.27s +1.91s ⚠️
dist/heading6.675c185b.js 1.38kb +0.00b 8.99s +1.95s ⚠️
dist/16.6b0e338c.js 1.38kb +0.00b 8.04s +1.96s ⚠️
dist/heading3.4e88bcd6.js 1.37kb +0.00b 8.58s +1.89s ⚠️
dist/16.e32aa49c.js 1.34kb +0.00b 3.30s +1.41s ⚠️
dist/16.50f9c790.js 1.33kb +0.00b 7.95s +1.88s ⚠️
dist/emoji.3654aec7.js 1.31kb +0.00b 8.20s +1.88s ⚠️
dist/16.81746ce1.js 1.29kb +0.00b 9.48s +3.40s ⚠️
dist/16.d1b58d7c.js 1.29kb +0.00b 8.04s +1.82s ⚠️
dist/16.1dbb5df4.js 1.28kb +0.00b 3.30s +1.41s ⚠️
dist/Modal.6509cbe3.js 1.26kb +0.00b 6.73s +1.27s ⚠️
dist/heading5.e338f1e8.js 1.25kb +0.00b 8.99s +1.95s ⚠️
dist/16.ceac57cd.js 1.25kb +0.00b 7.87s +2.00s ⚠️
dist/expand.4d883914.js 1.24kb +0.00b 8.99s +1.49s ⚠️
dist/16.0efadc10.js 1.23kb +0.00b 7.60s +1.93s ⚠️
dist/16.35be54a4.js 1.23kb +0.00b 7.66s +1.79s ⚠️
dist/16.6be9bbc8.js 1.23kb +0.00b 7.87s +2.00s ⚠️
dist/16.9015e8cf.js 1.23kb +0.00b 8.08s +2.41s ⚠️
dist/16.234ee133.js 1.23kb +0.00b 3.30s +1.41s ⚠️
dist/heading2.89a8e126.js 1.19kb +0.00b 8.58s +1.89s ⚠️
dist/16.7ca41ffe.js 1.16kb +0.00b 9.48s +3.40s ⚠️
dist/mention.ae379620.js 1.15kb +0.00b 8.32s +1.87s ⚠️
dist/heading4.b14d5ea4.js 1.14kb +0.00b 8.66s +1.94s ⚠️
dist/layout.d9df99ef.js 1.13kb +0.00b 10.32s +3.99s ⚠️
dist/divider.4476c3de.js 1.11kb +0.00b 8.20s +1.88s ⚠️
dist/quote.4733acb8.js 1.10kb +0.00b 8.46s +1.88s ⚠️
dist/action.b9409056.js 1.08kb +0.00b 8.04s +1.82s ⚠️
dist/decision.77ee0aaa.js 1.07kb +0.00b 8.20s +1.94s ⚠️
dist/panel-warning.e55309d2.js 1.06kb +0.00b 8.46s +1.88s ⚠️
dist/list.cf500a90.js 1.03kb +0.00b 8.32s +1.87s ⚠️
dist/heading1.165705a7.js 1.03kb +0.00b 8.58s +1.89s ⚠️
dist/panel-error.364fbf3c.js 987.00b +0.00b 8.32s +1.87s ⚠️
dist/panel.e4fe05d1.js 978.00b +0.00b 8.46s +1.88s ⚠️
dist/table.fd1280b6.js 970.00b +0.00b 8.58s +1.89s ⚠️
dist/panel-success.66723ab0.js 926.00b +0.00b 8.46s +1.88s ⚠️
dist/panel-note.a8b696c4.js 922.00b +0.00b 8.38s +1.87s ⚠️
dist/media-viewer-analytics-error-boundary.ee954f0e.js 892.00b +0.00b 35.35s +15.29s ⚠️
dist/EmojiTypeAheadComponent.441c229c.js 619.00b +0.00b 18.79s -46.40s 🚀
dist/simpleHasher.dd9d4306.js 609.00b +0.00b 53.86s +38.10s ⚠️
dist/index.html 219.00b +0.00b 3.71s -3.38s 🚀
dist/media-card-analytics-error-boundary.2da782a4.js 201.00b +0.00b 57.81s +21.68s ⚠️

Cached Bundles

No bundle changes detected.

Three.js x4 🚨

Timings

Description Time Difference
Cold FAILED -0.00ms
Cached FAILED -0.00ms

Cold Bundles

No bundles found, this is probably a failed build...

Cached Bundles

No bundles found, this is probably a failed build...

Click here to view a detailed benchmark overview.

samccone added a commit to samccone/bundle-buddy that referenced this pull request May 23, 2020
Remove prefix clean independent of graph files.
This was leading to a sitation where parcel files were not being
matched.

parcel-bundler/parcel#4648

This is however still needed for webpack, so this logic is being pushed
into the custom transform for webpack ONLY.
samccone added a commit to samccone/bundle-buddy that referenced this pull request May 23, 2020
samccone added a commit to samccone/bundle-buddy that referenced this pull request May 23, 2020
@devongovett devongovett marked this pull request as ready for review June 1, 2020 17:40
@mischnic
Copy link
Member

mischnic commented Jun 1, 2020

You'll need to add the plugin to the default config's package.json

@devongovett devongovett changed the title WIP: bundle buddy reporter Bundle buddy reporter Jun 3, 2020
Copy link
Member

@DeMoorJasper DeMoorJasper left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a linting issue, other than that looks good

@DeMoorJasper DeMoorJasper merged commit 2668bee into v2 Jun 3, 2020
@DeMoorJasper DeMoorJasper deleted the bundle-buddy branch June 3, 2020 18:25
@mattrossman
Copy link

mattrossman commented Jul 25, 2020

I know this is WIP but can you explain how to actually use this? I set BUNDLE_BUDDY=true and it spit out a bundle-buddy.json in my build directory after a build, but it contains very little data.

I looked on the bundle buddy repo and npm page for guidance on how to use the tool, and I gathered that I should install bundle-buddy and then run yarn bundle-buddy ./dist/.*map. This gave me the output "No bundle duplication detected" but I don't see any indication of how to pull up the UI. Any pointers @samccone?

@mischnic
Copy link
Member

It's documented here: https://v2.parceljs.org/features/production/

@samccone
Copy link

Hey all, once you have the generated file you can upload it to https://bundle-buddy.com/ to view the report on your project. The application is still very much in an alpha state :) But it is totally usable. @mattrossman would love to hear your feedback!

Thanks all.

@mattrossman
Copy link

Thanks, I just tried it out. Some initial thoughts:

  • Manually uploading the files to your site every time is a real pain, it'd be so much nicer if the UI could be generated locally or at least auto-uploaded.
  • Could you report the gzipped size too?
  • While the UI looks very different from your screenshot, I found that I can pull up a similar graph chart by clicking one of the module names at the bottom. It is hard to use this chart because I can't zoom in, move around, or allow it to take up more space on the screen.

phantom930 pushed a commit to phantom930/bundle-buddy that referenced this pull request Jul 1, 2022
Remove prefix clean independent of graph files.
This was leading to a sitation where parcel files were not being
matched.

parcel-bundler/parcel#4648

This is however still needed for webpack, so this logic is being pushed
into the custom transform for webpack ONLY.
phantom930 pushed a commit to phantom930/bundle-buddy that referenced this pull request Jul 1, 2022
phantom930 pushed a commit to phantom930/bundle-buddy that referenced this pull request Jul 1, 2022
raika-dev pushed a commit to raika-dev/bundle-buddy that referenced this pull request Oct 13, 2022
Remove prefix clean independent of graph files.
This was leading to a sitation where parcel files were not being
matched.

parcel-bundler/parcel#4648

This is however still needed for webpack, so this logic is being pushed
into the custom transform for webpack ONLY.
raika-dev pushed a commit to raika-dev/bundle-buddy that referenced this pull request Oct 13, 2022
raika-dev pushed a commit to raika-dev/bundle-buddy that referenced this pull request Oct 13, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants